<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="${pageContext.request.contextPath }/js/kindeditor-4.1.10/themes/default/default.css" type="text/css" rel="stylesheet">
<script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath }/js/kindeditor-4.1.10/kindeditor-all-min.js"></script>
<script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath }/js/kindeditor-4.1.10/lang/zh_CN.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
<link id="easyuiTheme" rel="stylesheet" type="text/css"	href="${pageContext.request.contextPath }/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/default.css">
<script type="text/javascript" src="${pageContext.request.contextPath }/js/easyui/jquery.easyui.min.js"></script>
<script	src="${pageContext.request.contextPath }/js/easyui/locale/easyui-lang-zh_CN.js"	type="text/javascript"></script>
<script src="${pageContext.request.contextPath }/js/common.js" type="text/javascript"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/ajaxfileupload.js"></script>
</head>

<body>

<div style="padding:10px 10px 10px 10px">
		<intput type="hidden" name="temp" id="temp"/>

		<form id="youngAddForm" class="table-edit" method="post" enctype="multipart/form-data">
	    <table cellpadding="5">
	        <tr>
	            <td>姓名:</td>
	            <td><input class="easyui-validatebox" required="true" type="text" name="name"  style="width: 280px;"></input></td>
	        </tr>
	      
	        <tr>
	            <td>职务:</td>
	            <td><input class="easyui-validatebox"  required="true"  type="text" name="position" style="width: 280px;"></input></td>
	        </tr>
	        
	        <tr>
			<td><label>类别:</label></td>
			<td><select id="type" class="easyui-combobox"  required="true" name="type" style="width:200px;">
				<option value="1">季度</option>
				<option value="2">年度</option>
			</select></td>
		</tr>
	        
	        <tr>
	            <td>头像地址:</td>
	            <td>
	            	<input id="headerImg" type="input" name="headerImg"  class="easyui-validatebox" style="width: 800px; value=""/>	
	            </td>
	            
	        </tr>
	        <tr>
	            <td></td>
	            <td>
	            	<input type="file" id="headerImgFile" name="headerImgFile" accept=".jpg,.gif,.png,.bmp">
	            </td>
	            
	        </tr>
	        <tr>
	            <td></td>
	            <td><a href="javascript:void(0)" class="easyui-linkbutton" onclick="uploadHeaderImg();">上传图片</a></td>
	        </tr>
	        <tr>
	            <td>生活照地址:</td>
	            <td>
	            	<input id="liveImg" type="input" name="liveImg" class="easyui-validatebox" style="width: 800px; value=""/>	
	            </td>
	            
	        </tr>
	        <tr>
	            <td></td>
	            <td>
	            	<input type="file" id="liveImgFile" name="liveImgFile" accept=".jpg,.gif,.png,.bmp">
	            </td>
	            
	        </tr>
	        <tr>
	            <td></td>
	            <td><a href="javascript:void(0)" class="easyui-linkbutton" onclick="uploadLiveImg();">上传图片</a></td>
	        </tr>
			
			<tr>
	            <td>青春宣言:</td>
	           <td> <textarea  rows="5" name="motto" class="textarea easyui-validatebox"  style="height:200px;width: 280px;"></textarea></td>
	        </tr>
	        
	    </table>
	</form>
	<div style="padding:5px">
	    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">提交</a>
	    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()">重置</a>
	</div>
</div>

</body>
<script type="text/javascript">

	//提交表单
	function submitForm(){
		//有效性验证
		if(!$('#youngAddForm').form('validate')){
			$.messager.alert('提示','表单还未填写完成!');
			return ;
		}
		
		$.post("${pageContext.request.contextPath}/young/save",$("#youngAddForm").serialize(), function(data){
			if(data.status == 200){
				$.messager.alert('提示',data.data);
				 //清空表单
				clearForm();
			}else{
				$.messager.alert('提示',data.data);
			}
		});
	}
	
	function clearForm(){
		$('#youngAddForm').form('reset');
		newsAddEditor.html('');
		clearImg();
	}
	
	function uploadHeaderImg(){
		if($('#headerImgFile').val() == ''){
			$.messager.alert('提示','您还没有选择要上传的文件！');
			return false;
		}
		beforeSend();
		uploadHeaderImgFile();
	}
	function uploadLiveImg(){
		if($('#liveImgFile').val() == ''){
			$.messager.alert('提示','您还没有选择要上传的文件！');
			return false;
		}
		beforeSend();
		uploadLiveImgFile();
	}
	
	function beforeSend() { 
		var h = document.body.clientHeight; 
		$("<div class=\"datagrid-mask\"></div>").css({display:"block",width:"100%",height:h}).appendTo("body"); 
		$("<div class=\"datagrid-mask-msg\"></div>").html("正在上传数据，请稍候。。。").appendTo("body").css({display:"block", 
		left:($(document.body).outerWidth(true) - 190) / 2, 
		top:(h - 45) / 2}); 

		}
	function uploadHeaderImgFile(){

            $.ajaxFileUpload({
                url:'file/uploadHeaderImgFile',//用于文件上传的服务器端请求地址
                secureuri:true,//是否启用安全提交，一般设置为false
                fileElementId:'headerImgFile',//文件上传控件的id
                dataType:'text',//服务器返回的数据类型
                //success: function (data,status){
                success: function (data,status){
   						
                	$('.datagrid-mask-msg').remove(); 
                	$('.datagrid-mask').remove();
					//手动截取字符串,转换为json对象
					var jsonstring = data.substring(data.indexOf('{'),data.lastIndexOf('}') + 1);
					var jsondata = jQuery.parseJSON(jsonstring);
					
					if(jsondata.error == '0'){
						$('#headerImg').val(jsondata.url);
						$.messager.alert('提示','图片上传成功!');
					}else{
						$.messager.alert('提示','图片上传失败!');
					}
					
                },
                error: function (data,status,e){
                    alert("服务中断或连接超时导致通信失败！");
                }
            }
            )
            return false;
        }
	function uploadLiveImgFile(){

            $.ajaxFileUpload({
                url:'file/uploadLiveImg',//用于文件上传的服务器端请求地址
                secureuri:true,//是否启用安全提交，一般设置为false
                fileElementId:'liveImgFile',//文件上传控件的id
                dataType:'text',//服务器返回的数据类型
                //success: function (data,status){
                success: function (data,status){
   						
                	$('.datagrid-mask-msg').remove(); 
                	$('.datagrid-mask').remove();
					//手动截取字符串,转换为json对象
					var jsonstring = data.substring(data.indexOf('{'),data.lastIndexOf('}') + 1);
					var jsondata = jQuery.parseJSON(jsonstring);
					
					if(jsondata.error == '0'){
						$('#liveImg').val(jsondata.url);
						$.messager.alert('提示','图片上传成功!');
					}else{
						$.messager.alert('提示','图片上传失败!');
					}
					
                },
                error: function (data,status,e){
                    alert("服务中断或连接超时导致通信失败！");
                }
            }
            )
            return false;
        }
</script>
